<template>
  <div>
    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      @select="selectMenu"
      @open="handleOpen"
      @close="handleClose"
      background-color="#3a405a"
      text-color="#fff"
      active-text-color="#54b876"
      :router="true"
      :unique-opened="true"
      :style="{ height: asideHeight + 'px' }"
    >
      <template v-for="(item, index) in initRoutes">
        <template v-if="item.hidden == 1">
          <!-- 判断一级菜单里面是否有二级菜单 -->
          <template v-if="item.children && item.children.length > 1">
            <el-submenu :index="item.id + ''" :key="index">
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{ item.title }}</span>
              </template>
              <el-menu-item
                v-for="(itemC, indexC) in item.children"
                :index="itemC.path"
                :key="indexC"
              >
                <i :class="itemC.icon"></i>
                <span>{{ itemC.title }}</span>
              </el-menu-item>
            </el-submenu>
          </template>
          <template v-else-if="item.children && item.children.length == 1">
            <el-menu-item :index="item.children[0].path" :key="index">
              <i :class="item.children[0].icon"></i>
              <span slot="title">{{ item.children[0].title }}</span>
            </el-menu-item>
          </template>
          <template v-else>
            <el-menu-item :index="item.path" :key="index">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.title }}</span>
            </el-menu-item>
          </template>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "SideBar",
  data() {
    return {
      asideHeight: 300,
    };
  },
  created() {
    const h = window.innerHeight;

    this.asideHeight = h - 60;
    console.log(this.$store.state.initRoutes);
  },
  computed: {
    ...mapState(["initRoutes"]),
  },
  methods: {
    selectMenu(key, keyPath) {
      console.log("select:", key, keyPath);
    },
    handleOpen(key, keyPath) {
      console.log("open:", key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log("close:", key, keyPath);
    },
  },
};
</script>